<template>
    <transition name="animate">
        <div class="alert-page" v-if="alertFlag">
            <div class="alert-head">
                <i class="iconfont icon-icon_arrow_left icon-head" @click="dis"></i>
                <p>
					<span v-for="(va,index) in headarr" 
						:key="index"
						@click="addactive(index)"
						:class="{active:curindex==index}"
					>
						{{va}}
					</span>
                </p>
				<h3>
					<i class="iconfont icon-bofang1"></i>
					<b>随机播放全部</b>
				</h3>
            </div>
            <main>
				<ul v-if="mynear.length && curindex === 1">
					<li v-for="item in mynear" :key="item.mid">
						<p>{{ item.name }}</p>
						<span>{{ item.title }}</span>
					</li>
				</ul>
                <div v-if="mylike.length === 0 && curindex === 0">还没有收藏，去添加收藏吧！！！</div>
                <ul v-if="mylike.length && curindex === 0">
                    <li v-for="item in mylike" :key="item.mid">
						<p>{{ item.name }}</p>
						<span>{{ item.title }}</span>
					</li>
                </ul>
            </main>
        </div>
    </transition>
</template>

<script>
import { getSongsUrl } from '../api/song'
import { mapState, mapMutations } from 'vuex'
export default {
    data(){
        return{
            mylike: [],//我喜欢的歌曲数据
			mynear: [],//最近听的
			headarr: ['我喜欢的','最近听的'],
			curindex: 0
        }
    },
    methods: {
        ...mapMutations(['changeAlert']),
        dis(){
            this.changeAlert(false);
        },
		addactive(index){
            this.curindex = index
            if(this.curindex === 1){
                this.mynear = JSON.parse(localStorage.getItem('sings'))
            }else{
                this.mylike = JSON.parse(localStorage.getItem('praise'))  
            }
        },
        getsong(){
            this.mynear = localStorage.getItem('historylist')
        }
    },
    mounted(){
        if(this.curindex === 1){
            this.mynear = JSON.parse(localStorage.getItem('sings'))
        }else{
          this.mylike = JSON.parse(localStorage.getItem('praise'))  
        }
    },
    computed: {
      ...mapState(['alertFlag','alertlist'])
  },
}
</script>

<style lang='scss' scoped>
.alert-page{
    width: 100%;
    height: 100%;
    background: #222;
    position: fixed;
    top: 0;
    display: flex;
    transition: transform .2s;
    flex-direction: column;
}
.alert-head{
    width: 100%;
    position: relative;
    .icon-head{
        color:#ffcd32;
        font-size: 22px;
        position: absolute;
        left: 15px;
		top: 8px;
    }
    p{
        width: 100%;
		height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    span{
        display: inline-block;
        text-align: center;
        width: 120px;
        height: 30px;
        line-height: 30px;
        color:hsla(0,0%,100%,.3);
        font-size: 14px;
        border: 1px solid rgba(100, 99, 99, 0.3);
        &:nth-child(1){
            border-right: none;
        }
         &:nth-child(2){
            border-left: none;
        }
        &.active{
            background: #333;
            color:white;
        }
    }
	h3{
		width: 135px;
		margin: 22px auto;
		height: 32px;
		border: 1px solid #9e9c9c;
		text-align: center;
		line-height: 32px;
		border-radius: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(158, 156, 156);
		b{
			font-weight: normal;
			font-size: 12px;
		}
		.iconfont{
			font-size: 18px;
			margin-top: 1px;
			margin-right: 5px;
		}
	}
}
main{
   flex: 1;
   width: 100%;
   color: white;
	ul{
		width: 100%;
		height: 100%;
		padding: 0 30px;
		li{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			height: 44px;
			margin-bottom: 20px;
			p{
				font-size: 14px;
				font-weight: bold;
				color: rgb(233, 230, 230);
			}
			span{
				font-size: 14px;
				font-weight: bold;
				color: rgb(110, 108, 108);
				margin-top: 5px;
			}
		}
	}
    div{
        width: 240px;
        margin: 30px auto;
        text-align: center;
        padding: 10px 10px;
        font-size: 12px;
        color: rgb(110, 108, 108);
        border: 1px solid ;
        border-radius: 20px;
    }
}
.animate-enter, .animate-leave-to{
    transform: translateX(100%);
}
</style>